<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 470px;
        border: 1px solid black;
        margin: 50px auto;
        padding: 2px;
      }

      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        text-align: center;
      }

      th,
      td {
        padding: 2px 2px;
      }

      td > input {
        width: 100px;
        border: none;
        text-align: center;
        /* outline-color: gray;
          outline-width: .5px; */
        outline: none;
        padding: 3px;
      }

      tr.odd,tr.odd input {
          background-color: rgb(197, 204, 225);
      }

      .btnAdd {
        width: 100%;
        margin-top: 4px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <table>
        <thead>
          <!-- <th style="width: 100px;">name</th>
          <th style="width: 100px;">age</th>
          <th style="width: 100px;">gender</th>
          <th style="width: 170px;">操作</th> -->
        </thead>

        <tbody>
          <!-- 
            <tr>
                <td>Jack</td>
                <td>18</td>
                <td>男</td>
                <td>
                <button>编辑/保存</button>
                <button>删除</button>
                </td>
            </tr> 
        --></tbody>
      </table>
      <button class="btnAdd">+</button>
    </div>

    <script>
      var arr = [
        {
          name: "Jack",
          age: 18,
          gender: "男",
        },
        {
          name: "Rose",
          age: 20,
          gender: "女",
        },
        {
          name: "Top",
          age: 22,
          gender: "男",
        },
      ];

      function renderData() {
        var tBodyHtml = "";
        arr.forEach(function (item, index) {
          tBodyHtml += `
          <tr class=${index%2===1?"odd":""}>
            <td><input ${item.name!=="" && "disabled='true'"} value="${item.name}"></td>
            <td><input ${item.age!=="" && "disabled='true'"} value="${item.age}"></td>
            <td><input ${item.gender!=="" && "disabled='true'"} value="${item.gender}"></td>
            <td>
                <button class="btnEdit">编辑/保存</button>
                <button class="btnDelete">删除</button>
            </td>
          </tr>
          `;
        });
        tBody.innerHTML = tBodyHtml;

        /* 事件监听 */
        document.querySelectorAll(".btnDelete").forEach(function (btn, index) {
          btn.onclick = function () {
            console.log(index);
            arr.splice(index, 1);
            renderData();
          };
        });

        document.querySelectorAll(".btnEdit").forEach(function (btn, index) {
          btn.onclick = function () {
            onBtnEditClick(this, index);
          };
        });
      }

      function onBtnEditClick(btn, index) {
        console.log(index);
        var ips = btn.parentNode.parentNode.querySelectorAll("input");

        if (!ips[0].getAttribute("disabled")) {
          // 保存
          arr.splice(index, 1, {
            name: ips[0].value,
            age: ips[1].value,
            gender: ips[2].value,
          });
          console.log(arr);

          ips.forEach(function (ip, index) {
            ip.setAttribute("disabled", true);
          });
        } else {
          // 编辑
          ips.forEach(function (ip, index) {
            ip.removeAttribute("disabled");
          });
        }
      }

      /* 获取重要元素 */
      var tHead = document.querySelector("thead");
      var tBody = document.querySelector("tbody");
      var btnAdd = document.querySelector(".btnAdd");

      /* 渲染表头 */
      var tHeadHtml = "";
      for (var key in arr[0]) {
        tHeadHtml += `<th style="width: 100px;">${key}</th>`;
      }
      tHeadHtml += `<th style="width: 170px;">操作</th>`;
      tHead.innerHTML = tHeadHtml;

      /* 渲染数据 */
      renderData();

      /* 添加数据 */
      btnAdd.onclick = function () {
        arr.push({
          name: "",
          age: "",
          gender: "",
        });
        renderData();
      };
    </script>
  </body>
</html>
